<template>
  <div class="user-code-container nav-bar-top">
    <van-nav-bar class="nav-bar" title="二维码" left-arrow @click-left="$router.back()"/>
    <div class="qrCode">
      <vue-qr
        :text="qrCodeText"
        :margin="10"
        colorDark="#e9b461"
        colorLight="#fff"
        :logoSrc="user.headUrl ? user.headUrl : 'imgs/logo1.png'"
        :logoScale="0.2"
        :dotScale="0.95"
        :size="200"/>
      <span>扫一扫上面的二维码图案,加我好友</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import vueQr from 'vue-qr'

export default {
  name: 'userCode',
  components: {
    vueQr
  },
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      qrCodeText: 'http://res.mvvm.site/mall/index.html'
    }
  }
}
</script>

<style lang="scss">
.user-code-container{
  padding-top: 10px;
  display: flex;
  justify-content: center;
  .qrCode{
    height: 350px;
    width: 350px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      width: 180px;
      height: 180px;
    }
    span{
      margin-top: 30px;
      font-size: 15px;
      color: #999;
    }
  }
}
</style>
